import {Card, Col, DatePicker, Drawer, Form, Row, Select} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import DailyStatisticsForm from './components/DailyStatisticsForm';
import {queryDaily, queryDailyStatistics} from '@/services/finance';

const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const actionRef = useRef();
  const [formRef] = Form.useForm();
  const [statisticsData, setStatisticsData] = useState({
    totalAmount: 0,
    totalNum: 0,
    totalSqm: 0
  });
  const {RangePicker} = DatePicker;
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      hideInForm: true,
      hideInSearch: true,
      render: (text, record, index, action) => {
        return `${index + 1}`
      }
    },
    {
      title: '产品编码',
      dataIndex: 'productCode',
      hideInSearch: true,
    },
    // {
    //   title: '产品名称',
    //   dataIndex: 'productName',
    //   hideInSearch: true,
    // },
    {
      title: '出货总金额(元)',
      dataIndex: 'shippedPrice',
      hideInSearch: true,
    },
    {
      title: '出货平米数',
      dataIndex: 'shippedSqm',
      hideInSearch: true,
    },
    {
      title: '出货总量',
      dataIndex: 'shippedNum',
      hideInSearch: true,
    },
    {
      title: '日期',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInTable: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return <RangePicker/>;
      },
    }
  ];

  const tableRef = useRef();
  useEffect(() => {
    tableRef.current?.setFieldsValue({
      createTime: [moment().subtract(6, "days"), moment()],
    });
    tableRef.current?.submit();
  },[]);

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        formRef={tableRef}
        rowKey="pkId"
        search={{
          labelWidth: 120,
        }}
        tableExtraRender={(_, data) => (
          <Card>
            <Row>
              <Col span={8}>
                <Card style={{width: '98%'}}>
                  <h4 style={{color: '#333'}}>出货总金额(元)</h4>
                  <div style={{fontSize: '28px'}}>{statisticsData.totalAmount}</div>
                </Card>
              </Col>
              <Col span={8}>
                <Card style={{width: '98%'}}>
                  <h4 style={{color: '#333'}}>出货平米数</h4>
                  <div style={{fontSize: '28px'}}>{statisticsData.totalSqm}</div>
                </Card>
              </Col>
              <Col span={8}>
                <Card style={{width: '98%'}}>
                  <h4 style={{color: '#333'}}>出货总量</h4>
                  <div style={{fontSize: '28px'}}>{statisticsData.totalNum}</div>
                </Card>
              </Col>
            </Row>
          </Card>
        )}
        request={async (params, sorter, filter) => {
          const param = params.createTime ? {
            ...params,
            pageNum: params.current,
            startDate: moment(params.createTime[0], 'YYYY-MM-DD HH:mm:ss').format('YYYYMMDD') ,
            endDate: moment(params.createTime[1], 'YYYY-MM-DD HH:mm:ss').format('YYYYMMDD'),
          } : {...params, pageNum: params.current};
          const res = await queryDaily(param)
          const statistics = await queryDailyStatistics(param)
          setStatisticsData(statistics.data || {
            totalAmount: 0,
            totalNum: 0,
            totalSqm: 0
          })
          if (res && res.status === '0') {
            return {
              data: res.result.records,
              success: true,
              total: res.result.total
            }
          }else {
            return {
              data: [],
              success: false,
              total: 0
            }
          }

        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
